<template>
	<view class="radio-box">
		<checkbox :disabled="keys.disabled" @click="checkboxChange(index,item[keys.valueKey])" v-for="(item, index) in items" :key="index" :checked="checked[index] == item[keys.valueKey]">{{item[keys.rangeKey]}}</checkbox>
	</view>
</template>
<script>
	export default {
		name:"yCheckbox",
		props: {
			value: '',
			keys: {}
		},
		computed:{
			items(){
				return this.keys.range || [];
			},
			checked(){
				let arr = [];
				for(let i = 0;i < this.items.length;i++){
					const v = this.items[i][this.keys.valueKey]+'';
					if(this.values.includes(v)){
						arr[i] = v;
					}else{
						arr[i] = '';
					}
				}
				return arr;
			},
			values(){
				return (this.value + '').split(',');
			}
		},
		methods: {
			checkboxChange(index,value) {
				if(this.checked[index] == value){
					this.checked[index] = '';
				}else{
					this.checked[index] = value+'';
				}
				const v = this.checked.filter(x=>{
					if(x != '')return x;
				}).join(',');
				//检测类型
				typeof this.keys.change === "function" && this.keys.change(v);
				this.$emit('input',v);
			}
		}
	}
</script>

<style lang="scss">
	.radio-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		checkbox {
			margin:0 0 5px 5px;
		}
	}
</style>
